<template>
    <div class="g-flex-center g-height100 g-width100">
        <el-card class="box-card" style="width: 480px;">
            <div slot="header" class="g-flex-align-cross-center g-flex-align-between">
                <span>选择要进入的应用</span>
                <el-avatar icon="el-icon-user-solid" :src="currentUserinfo ? currentUserinfo.user.avatar:''"></el-avatar>
            </div>
                <el-button type="primary" v-for="(app,index) in applications" :key="index" style="margin:10px;" class="g-pointer" @click="enter(app)" :loading="buttonLoading[app.id]">{{app.name}}</el-button>
        </el-card>

    </div>
</template>

<script>
    import storage from '../../../../common-util/src/tools/StorageTools.js'
    /* 选择应用界面 */
    export default {
        name: "selectApplication",
        data (){
            return {
                userinfoLoading: false,
                applications:[],
                currentUserinfo: null,
                buttonLoading:{}
            }
        },
        mounted(){
            this.getApplications()
            this.getUserinfo()
        },
        methods:{
            getApplications(){
                this.userinfoLoading = true
                this.axios.get(this.$baseURL.base +  '/base/application/list/current/user').then(res => {
                    let applications = res.data
                    this.applications = applications
                    // 如果只有一个系统直接进入
                    if(applications.length == 1){
                        this.$nextTick(()=>{
                            this.enter(applications[0],true)
                        })
                    }
                    // 添加混合模式
                    if(applications.length>1){
                        applications.push({
                            name:'混合模式',
                            id:null
                        })
                    }
                }).catch((error) => {
                    if(error.response){
                        this.$message.error(error.response.data.msg)
                    }else{

                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.userinfoLoading = false
                })
            },
            getUserinfo(){
                this.userinfoLoading = true
                this.axios.get(this.$baseURL.base +  '/base/user/userinfo/current').then(res => {
                    this.currentUserinfo = res.data
                }).catch((error) => {
                    if(error.response){
                        this.$message.error(error.response.data.msg)
                    }else{

                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.userinfoLoading = false
                })
            },
            enter(application,delay){

                if(delay){
                    this.$message.info('即将进入应用：' + application.name)

                    this.$set(this.buttonLoading,application.id,true)
                    setTimeout(()=>{
                        this.enter(application,false)
                    },200)
                }else {
                    this.$set(this.buttonLoading,application.id,true)
                    storage.set("currentApplication",application)
                    // 感觉遇到一个问题描述如下：
                    // 在portal项目中加载子项目导航项目，但portal导航到登录页面后Mfe组件页面后这里Mfe的被挂载的子项目的挂载点已经不存在了，（即使存在一个同样的id容器也不是以前的容器了）
                    // 所以子项目应该会加载不出来，暂时两种解决方法，一种是mfe组件页面加keepAlive包裹（这种方式不会触发子项目的生命周期钩子函数，只有一个berforeRouteUpdate方法会监测到路由的改变）,另一种是直接直接浏览器地址刷新重新加载
                    // 暂时用刷新的方式 todo
                     //this.$router.replace('/')
                    //common-nav路径为common-nav项目基础路由配置，这样可以微前端模式下激活common-nav项目的加载
                    if(window.mfe){
                        window.location.href=window.location.href.replace('selectApplication','common-nav')
                    }else if(process.env.VUE_APP_PORTALONE == 'true'){
                        // 如果是portal-one单机直接导航即可，单机运行这里的导航路径取决到路由的配置，由于目前配置的是/*,所以可以导航到任意路径即可加载导航模块，为了跟上面一致，这里也取common-nav
                        this.$router.replace('/common-nav')
                    }
                }

            }
        }
    }
</script>

<style scoped>

</style>